<template>
  <el-card class="mt-5px">
    <el-row >
      <el-col :span="24" class="mt-3 mb-3">
        <div class="flex items-center dawn-head-p" >
          <span class="text-4 dawn-color-title">申请信息</span>
          <span class="text-4 ">｜</span>
          <span class="text-4 ">{{ data.applyNo }}</span>
          <span class="text-4 ">｜</span>
          <dict-tag :type="DICT_TYPE.HOSP_MEDICAL_COPY_STATUS" :value="data.status" />
        </div>
      </el-col>
      <el-col :span="24">
        <table class="medical-record-table">
          <tr>
            <td class="medical-record-fill-color"> 病人姓名 </td>
            <td style="width: 120px"> {{ data.patientName }} </td>
            <td  class="medical-record-fill-color"> 住院号 </td>
            <td style="width: 150px" class="dawn-color-flag"> {{ data.hospitalNo }} </td>
            <td  class="medical-record-fill-color"> 出院科室 </td>
            <td> {{ data.leaveHospitalDept }} </td>
            <td  class="medical-record-fill-color"> 出院日期 </td>
            <td> {{ data.leaveHospitalDate }} </td>
          </tr>
          <tr>
            <td class="medical-record-fill-color"> 病人类型 </td>
            <td class="dawn-color-flag"> {{ data.patientType }} </td>
            <td class="medical-record-fill-color"> 病人证件号 </td>
            <td> {{ data.patientCardNo }} </td>
            <td class="medical-record-fill-color"> 病人ID </td>
            <td> {{ data.patientId }} </td>
          </tr>
          <tr>
            <td class="medical-record-fill-color"> 病案类型 </td>
            <td> {{ data.medicalType }} </td>
            <td class="medical-record-fill-color"> 复印份数 </td>
            <td class="dawn-color-flag"> {{ data.number }} </td>
            <td class="medical-record-fill-color"> 复印用途 </td>
            <td>{{ data.purpose }}</td>
            <td class="medical-record-fill-color"> 复印内容 </td>
            <td> {{ data.content }} </td>
          </tr>
        </table>

        <table class="medical-record-table mt-15px">
          <tr>
            <td class="medical-record-fill-color"> 申请人姓名 </td>
            <td style="width: 120px"> {{ data.applicantName }} </td>
            <td class="medical-record-fill-color"> 申请人证件号 </td>
            <td style="width: 150px"> {{ data.applicantCardNo }} </td>
            <td style="width: 150px" class="medical-record-fill-color"> 申请人与病人关系 </td>
            <td colspan="3" class="dawn-color-flag"> {{ data.relation }} </td>
          </tr>
        </table>

        <table class="medical-record-table mt-15px">
          <tr>
            <td  class="medical-record-fill-color"> 收取方式 </td>
            <td style="width: 120px" class="dawn-color-flag"> {{ data.collectType }} </td>
            <!--              <block v-if="data.collectType === '邮寄'">-->
            <td  class="medical-record-fill-color"> 快递公司 </td>
            <td colspan="2"> {{ data.deliveryName }} </td>
            <td class="medical-record-fill-color"> 快递单号 </td>
            <td colspan="2"> {{ data.deliveryNo }} </td>
            <!--              </block>-->
          </tr>
          <tr v-if="data.collectType === '邮寄'">
            <td class="medical-record-fill-color"> 收件人姓名 </td>
            <td> {{ data.recipientName }} </td>
            <td class="medical-record-fill-color"> 收件人电话 </td>
            <td > {{ data.recipientPhone }} </td>
            <td class="medical-record-fill-color">收件人地址</td>
            <td colspan="3">{{ data.recipientAddress }} </td>
          </tr>
          <tr v-else>
            <td class="medical-record-fill-color"> 取件人姓名 </td>
            <td> {{ data.recipientName }} </td>
            <td class="medical-record-fill-color"> 取件人电话 </td>
            <td > {{ data.recipientPhone }} </td>
            <td class="medical-record-fill-color">取件地址</td>
            <td colspan="3">{{ data.recipientAddress }} </td>
          </tr>
        </table>
      </el-col>
    </el-row>
    <el-row >
      <el-col :span="24" class="mt-3 mb-3">
        <div class="flex items-center dawn-head-p" >
          <span class="text-4 dawn-color-title">支付信息</span>
        </div>
      </el-col>
      <el-col :span="24">
        <table class="medical-record-table">
          <tr>
            <td class="medical-record-fill-color"> 支付订单号 </td>
            <td style="width: 190px"> {{ data.orderNumber }} </td>
            <td class="medical-record-fill-color"> 渠道订单号 </td>
            <td style="width: 190px"> {{ data.thirdOrderNo }} </td>
            <td class="medical-record-fill-color"> 支付状态 </td>
            <td>
              <el-tag v-if="data.payStatus === 0" type="info" >待支付</el-tag>
              <el-tag v-else-if="data.payStatus === 1" type="primary" >支付中</el-tag>
              <el-tag v-else-if="data.payStatus === 2" type="success" >支付成功</el-tag>
              <el-tag v-else-if="data.payStatus === 3" type="danger" :show-overflow-tooltip="true">
                支付失败 {{ data.remark }}
              </el-tag>
              <el-tag v-else-if="data.payStatus === 4" type="warning" >已撤销</el-tag>
              <el-tag v-else-if="data.payStatus === 5" type="warning" >已退款</el-tag>
              <el-tag v-else-if="data.payStatus === 6" type="warning" >订单关闭</el-tag>
              <el-tag v-else-if="data.payStatus === 7" type="warning" >部分退款</el-tag>
            </td>
            <td class="medical-record-fill-color"> 支付金额(元) </td>
            <td>
              <el-tag type="success">{{ data.totalPrice }}</el-tag>
            </td>
          </tr>
          <tr>
            <td class="medical-record-fill-color"> 支付时间 </td>
            <td> {{ formatTime(data.payTime, 'yyyy-MM-dd HH:mm:ss') }}</td>
            <td class="medical-record-fill-color"> 支付方式 </td>
            <td> {{ data.payType }} </td>
            <td class="medical-record-fill-color"> 退款订单号 </td>
            <td> {{ data.refundNumber }} </td>
            <td class="medical-record-fill-color"> 退款金额(元) </td>
            <td>
              <el-tag type="danger">{{ data.refundPrice }}</el-tag>
            </td>
          </tr>
          <tr>
            <td class="medical-record-fill-color"> 退款时间 </td>
            <td> {{ formatTime(data.refundTime, 'yyyy-MM-dd HH:mm:ss') }}</td>
            <td class="medical-record-fill-color"> 退款原因 </td>
            <td> {{ data.refundReason }} </td>
          </tr>
        </table>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="24" class="mt-3 mb-3">
        <div class="flex items-center dawn-head-p" >
          <span class="text-4 dawn-color-title">资料文件</span>
        </div>
      </el-col>
      <el-col :span="24" style="padding: 15px 0px;">
        <table class="file-table">
          <tr>
            <td class="">
              <div class="img-box">
                <el-image
                  class="img-box-img"
                  lazy
                  :src="data.patientCardImgFront"
                  :preview-src-list="[data.patientCardImgFront]"
                  preview-teleported
                  fit="cover"
                />
                <el-tag v-if="data.patientType === '年满18岁'" class="img-box-text">病人身份证人像面</el-tag>
                <el-tag v-else class="img-box-text">病人户口本页</el-tag>
              </div>
            </td>
            <td class="">
              <div class="img-box">
                <el-image
                  class="img-box-img"
                  lazy
                  :src="data.patientCardImgReverse"
                  :preview-src-list="[data.patientCardImgReverse]"
                  preview-teleported
                  fit="cover"
                />
                <el-tag v-if="data.patientType === '年满18岁'" class="img-box-text">病人身份证国徽面</el-tag>
                <el-tag v-else class="img-box-text">申请人户口本页</el-tag>
              </div>
            </td>
            <td class="" v-if="data.patientType === '年满18岁' && data.patientCardImgHandheld">
              <div class="img-box">
                <el-image
                  class="img-box-img"
                  lazy
                  :src="data.patientCardImgHandheld"
                  :preview-src-list="[data.patientCardImgHandheld]"
                  preview-teleported
                  fit="cover"
                />
                <el-tag class="img-box-text">病人身份证手持照</el-tag>
              </div>
            </td>
            <td class="" v-if="data.relation !== '本人'">
              <div class="img-box">
                <el-image
                  class="img-box-img"
                  lazy
                  :src="data.applicantCardImgFront"
                  :preview-src-list="[data.applicantCardImgFront]"
                  preview-teleported
                  fit="cover"
                />
                <el-tag class="img-box-text" type="warning">申请人身份证人像面</el-tag>
              </div>
            </td>
            <td class="" v-if="data.relation !== '本人'">
              <div class="img-box">
                <el-image
                  class="img-box-img"
                  lazy
                  :src="data.applicantCardImgReverse"
                  :preview-src-list="[data.applicantCardImgReverse]"
                  preview-teleported
                  fit="cover"
                />
                <el-tag class="img-box-text" type="warning">申请人身份证国徽面</el-tag>
              </div>
            </td>
            <td class="" v-if="data.relation !== '本人' && data.patientCardImgHandheld">
              <div class="img-box">
                <el-image
                  class="img-box-img"
                  lazy
                  :src="data.applicantCardImgHandheld"
                  :preview-src-list="[data.applicantCardImgHandheld]"
                  preview-teleported
                  fit="cover"
                />
                <el-tag class="img-box-text" type="warning">申请人身份证手持照</el-tag>
              </div>
            </td>
            <td class="" v-if="data.relation !== '本人'">
              <div class="img-box">
                <el-image
                  class="img-box-img"
                  lazy
                  :src="data.otherFile"
                  :preview-src-list="[data.otherFile]"
                  preview-teleported
                  fit="cover"
                />
                <el-tag class="img-box-text" type="warning">授权同意书</el-tag>
              </div>
            </td>

          </tr>
        </table>
      </el-col>
    </el-row>


  </el-card>

</template>
<script setup lang="ts">
import { formatTime } from '@/utils'
import { DICT_TYPE, getStrDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict'
import { MedicalCopyApi, MedicalCopyVO } from '@/api/hospital/medicalcopy'

/** 病案复印 表单 */
defineOptions({ name: 'MedicalCopyDetailForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const loading = ref(true) // 加载中

const props = defineProps<{
  data: undefined
}>()

</script>

<style scoped>
:deep(.el-input-group__append) {
  padding: 0 5px;
}

:deep(.el-text) {
  color: #000000;
}

.medical-record-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #f2f3f5;
  table-layout: fixed;
}
.medical-record-table th, td {
  border: 1px solid #f2f3f5;
  padding: 3px 5px;
  text-align: left;
  height: 20px;
  overflow: hidden;
  font-size: 14px;
  color: #000000;
}
.medical-record-fill-color{
  background-color: #f5f7fa;
  border: 1px solid #f2f3f5;
  /*font-weight: bolder;*/
  color: #606266;
  width: 90px;
}

.file-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.file-table td {
  border: 0;
  padding: 3px 5px;
  text-align: left;
  height: 20px;
  overflow: hidden;
  font-size: 14px;
  color: #000000;
}

.dawn-color-flag {
  color: #dc2e2e !important;
  font-weight: 700;
}
.img-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-box-img{
  width: 80px;
  height: 50px;
}
.img-box-text{
  margin-top: 3px;
}
</style>
